<template>
    <div>
        <div><els-button-group :column="test">
        </els-button-group></div>
        <div style="margin-top:20px;">
            <els-button-group
                    :column="column"
                    :attrs="attrs"
                    :type="type"
                    :delimiter="delimiter">
            </els-button-group>
        </div>
    </div>
</template>

<script>
    import ElsButtonGroup from "../../components/ui/els-button-group/main";
    export default {
        name: "button-group",
        components: {ElsButtonGroup},
        data(){
            return {
                column:[
                    {text:'A'},
                    {text:'B'},
                    {text:'C'},
                    {text:'D'},
                    {text:'E'},
                ],
                type:'normal',
                attrs:{size:'mini'},
                delimiter:undefined,
            }
        },
        computed:{
            test(){
                const btn1 = {text:'追加分隔线',size:'mini',type:'primary',handle:this.handleAddDelimiter};
                const btn2 = {text:'移除分隔线',size:'mini',type:'primary',handle:this.handleDelDelimiter};
                const btn3 = {text:'改变类型',size:'mini',type:'primary',handle:this.handleChangeType};
                return [btn1,btn2,btn3];
            }
        },
        methods:{
            handleAddDelimiter(){
                this.delimiter = {divider:true};
            },
            handleDelDelimiter(){
                this.delimiter = undefined;
            },
            handleChangeType(){
                const ts = ['normal','primary','danger','warning','success','text'];
                const len = ts.length;
                const ins = this.utilRand(0,len - 1);
                this.type = ts[ins];
            },
            utilRand(min = 0,max = 1){
                const a = max - min;
                const b = min;
                return Math.round(a * Math.random()) + min;
            }
        }
    }
</script>

<style scoped>

</style>
